<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/jsonExportCsv.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>

    <style type="text/css">
        [v-cloak] {
            display: none;
        }
        
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
        
        .textinput {
            background-color: red;
        }
        
        .textinputarea {
            background-color: green;
        }
    </style>
</head>

<body>


    <div id='app3' v-cloak>
        <a href="#" @click="get">Alarm</a>
        <a href="#" @click="download">Download</a>
        <br>
        <input type="text" placeholder="Search" @keyup="search">
        <table :class="'gridtable'">
            <thead>
                <th v-for="(key,val) in axiosRes[0]"> {{ val }}</th>
            </thead>
            <tbody>
                <tr v-for="i in axiosRes.length">
                    <td v-for="key in axiosRes[i-1]" v-bind:class="'textinput'"> {{ key }}</td>
                    <td>
                        <a href="#" @click="rowEdit()">Edit</a> |
                        <a href="#" @click="rowRemove()">Remove</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <p :style=" hide " style="font-size: 10px; ">Total Row:{{ axiosRes.length}}, Column: {{ tableColumn }}</p>
    </div>

    <script>
        // edit table
        let ajaxDate = [];
        const app3 = new Vue({
            el: '#app3',
            data: {
                hide: "display:none ",
                axiosRes: ajaxDate,
            },
            computed: {
                tableColumn: function() {
                    let rowinfo = this.axiosRes[0]
                    let col = 0
                    for (i in rowinfo) {
                        col++
                    }
                    return col
                }
            },
            methods: {
                search() {
                    console.log('search')
                },
                rowEdit: function() {
                    console.log('rowEdit')
                },
                rowRemove: function() {
                    console.log('rowRemove')
                },
                get: function() {
                    var that = this;
                    axios.get('http://localhost:3000/alarm/getAlarmHis').then(function(res) {
                        that.axiosRes = res.data.list
                    }, function() {
                        console.log('请求失败处理');
                    });
                    this.hide = "display:block "
                },
                download: function() {
                    let str = '';
                    for (val in this.axiosRes[0]) {
                        str += val + '\t,';
                    }
                    str += '\n';
                    for (let i = 0; i < this.axiosRes.length; i++) {
                        for (let item in this.axiosRes[i]) {
                            str += `${this.axiosRes[i][item] + '\t'},`;
                        }
                        str += '\n';
                    }
                    //encodeURIComponent解决中文乱码
                    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
                    //通过创建a标签实现
                    let link = document.createElement("a ");
                    link.href = uri;
                    //对下载的文件命名
                    link.download = "json数据表.csv ";
                    link.text = "download "
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            }

        });
    </script>
</body>


</html>